<template>
  <view class="container flex">
    <view class="top">
      <view class="total">
        <view class="money-name">累计收入</view>
        <view class="money">
          <text>￥</text>
          <text>1000.00</text>
        </view>
        <view @click="goWithdraw" class="btn">立即提现</view>
      </view>
      <view class="tips flex">订单确认收货次月25号可提现</view>
    </view>
    <view class="tabs flex">
      <view @click="tabClick('income')" :class="{ active: currentTab == 'income' }">收益入账</view>
      <view @click="tabClick('record')" :class="{ active: currentTab == 'record' }">提现记录</view>
    </view>
    <view class="content">
      <z-paging ref="paging" :fixed="false" v-model="list" @query="queryList">
        <template #empty>
          <view class="empty-box">
            <image src="/static/common/empty-data.png" mode=""></image>
            <view class="empty">暂无数据</view>
          </view>
        </template>
        <view v-if="currentTab == 'income'" class="income-content">
          <view class="title">待发放佣金</view>
          <view class="box">
            <view v-for="item in 4" class="cell flex">
              <view class="left">
                <view class="name">01月已确认收货</view>
                <view class="desc">预计2025年02月25日到账</view>
              </view>
              <view class="right">
                <text>¥</text>
                <text>20.00</text>
              </view>
            </view>
          </view>
          <view class="title">已结算佣金</view>
          <view class="box">
            <view v-for="(item, index) in 4" :key="index" class="cell flex">
              <view class="left">
                <view class="name">01月已确认收货</view>
                <view class="desc">预计2025年02月25日到账</view>
              </view>
              <view class="right">
                <text>¥</text>
                <text>20.00</text>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="record-content">
          <view class="search-box flex">
            <view class="search flex">
              <image src="/static/common/search-icon.png" mode=""></image>
              <input v-model="search" type="text" placeholder="请输入流水号" />
            </view>
            <view @click="handleFilter" class="filter flex">
              <image src="/static/common/filter-icon-gray.png" mode=""></image>
              <text>筛选</text>
            </view>
          </view>
          <view @click="goWithdrawDetail" v-for="(item, index) in 4" :key="index" class="cell">
            <view class="flex">
              <view class="flex">
                <image src="/static/common/alipay-icon.png" mode=""></image>
                <!-- <image src="/static/common/wechat-icon-green.png" mode=""></image> -->
                <text>流水号：09876543245678</text>
              </view>
              <view class="tag yellow">审核中</view>
            </view>
            <view class="flex">
              <view class="time">2024-12-13 12:32:43</view>
              <view class="num">
                <text>¥</text>
                <text>20.00</text>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
  <u-popup v-model="show" :safe-area-inset-bottom="true" closeable mode="bottom" border-radius="24">
    <view class="popup-title">筛选</view>
    <view class="popup-content">
      <view class="popup-t">审核状态</view>
      <view class="type flex">
        <view :class="{ active: filterType == 'pending' }" @click="filterTypeClick('pending')">审核中</view>
        <view :class="{ active: filterType == 'success' }" @click="filterTypeClick('success')">提现成功</view>
        <view :class="{ active: filterType == 'fail' }" @click="filterTypeClick('fail')">提现失败</view>
      </view>
    </view>
    <view class="popup-btn flex">
      <view @click="rest">重置</view>
      <view @click="confirm">确定</view>
    </view>
  </u-popup>
</template>

<script setup>
import { ref } from 'vue';
const search = ref('');
const currentTab = ref('record');
const tabClick = (val) => {
  if (currentTab.value == val) return;
  currentTab.value = val;
  paging.value.reload();
};
const list = ref([]);
const paging = ref(null);
const queryList = (pageNo, pageSize) => {
  console.log(pageNo, pageSize);
  paging.value.completeByTotal([1]);
};
const show = ref(false);
const handleFilter = () => {
  show.value = true;
};
const filterType = ref('');
const filterTypeClick = (val) => {
  if (filterType.value == val) return;
  filterType.value = val;
};
const filterTypeRest = () => {
  filterType.value = '';
  show.value = false;
  paging.value.reload();
};
const filterTypeConfirm = () => {
  show.value = false;
  paging.value.reload();
};
const goWithdrawDetail = () => {
  uni.navigateTo({
    url: '/subPages/withdrawDetail/withdrawDetail',
  });
};
const goWithdraw = () => {
  uni.navigateTo({
    url: '/subPages/withdraw/withdraw',
  });
};
</script>

<style lang="scss" scoped>
.popup-btn {
  width: 750upx;
  height: 120upx;
  line-height: 120upx;
  justify-content: space-around;
  margin-top: 40upx;
}

.popup-btn > view {
  font-size: 32upx;
  font-weight: 400;
  border-radius: 64upx;
  width: 320upx;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
  text-align: center;
}

.popup-btn > view:nth-child(1) {
  background-color: #ededed;
  color: #333;
}

.popup-btn > view:nth-child(2) {
  background-color: #ff0309;
  color: #ffffff;
}
.popup-title {
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #333;
  line-height: 50px;
}
.popup-content {
  padding: 0 12px;
  .popup-t {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }
  .type {
    margin-top: 12px;
    > view {
      font-size: 12px;
      color: #333;
      border: 1px solid #0000000f;
      border-radius: 30px;
      text-align: center;
      line-height: 26px;
      width: 75px;
      margin-right: 20px;
      &.active {
        border: 1px solid #ff0309;
        color: #ff0309;
      }
    }
  }
}
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 12px 12px 20px;
  flex-direction: column;
  > view {
    width: 100%;
  }
  .money-name {
    font-weight: 400;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
  .money {
    color: #333;
    font-weight: 600;
    text {
      font-size: 12px;
      &:last-child {
        font-size: 18px;
      }
    }
  }
  .top {
    background: radial-gradient(35% 80% at 100% 0%, #ffdcdd 0%, #ffffff 100%);
    border-radius: 12px;
    padding: 0 12px;
    position: relative;
    .total {
      padding-top: 12px;
      position: relative;
      .money-name {
        margin-bottom: 10px;
      }
      .money {
        text {
          font-size: 14px;
          &:last-child {
            font-size: 20px;
          }
        }
      }
      .btn {
        background: linear-gradient(90deg, #ff0309 0%, #ff6c2a 100%);
        box-shadow: -1px -1px 2px 0px #c9030080 inset;
        width: 72px;
        height: 34px;
        border-radius: 34px;
        text-align: center;
        line-height: 34px;
        color: #fff;
        font-weight: 500;
        font-size: 12px;
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -10px;
      }
    }
    .tips {
      height: 40px;
      color: #999999;
      font-weight: 400;
      font-size: 12px;
      margin-top: 12px;
      border-top: 1px solid #9999994d;
    }
  }
  .tabs {
    margin-top: 12px;
    height: 40px;
    background: #ffeeee;
    border-radius: 8px;
    justify-content: space-between;
    padding: 2px;
    view {
      flex: 1;
      height: 36px;
      border-radius: 6px;
      line-height: 36px;
      text-align: center;
      font-weight: 400;
      font-size: 16px;
      color: #333;
      &.active {
        background: #ffffff;
        color: #ff0309;
      }
    }
  }
  .content {
    flex: 1;
    height: 100px;
    overflow: hidden;
    .empty-box {
      text-align: center;
      margin-top: -150px;
      image {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
      }
      .empty {
        color: #333;
        font-weight: 500;
        font-size: 14px;
      }
    }
    .income-content {
      .title {
        height: 44px;
        line-height: 44px;
        color: #333;
        font-weight: 500;
        font-size: 14px;
      }
      .box {
        border-radius: 12px;
        background-color: #fff;
        padding: 0 12px;
        .cell {
          height: 64px;
          justify-content: space-between;
          border-bottom: 1px solid #0000000f;
          &:last-child {
            border-bottom: none;
          }
          .left {
            .name {
              color: #333;
              font-weight: 500;
              font-size: 14px;
              margin-bottom: 10px;
            }
            .desc {
              color: #999999;
              font-weight: 400;
              font-size: 12px;
            }
          }
          .right {
            align-items: flex-end;
            color: #ff0309;
            font-weight: 400;
            text {
              font-size: 12px;
              &:last-child {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .record-content {
      margin-top: 12px;
      padding: 12px;
      background: #fff;
      border-radius: 12px;
      .search-box {
        margin-bottom: 12px;
        .search {
          height: 40px;
          border-radius: 38px;
          background: #f9f9f9;
          padding: 0 12px;
          flex: 1;
          input {
            flex: 1;
            color: #999;
            font-weight: 400;
            font-size: 14px;
          }
          image {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }
        .filter {
          flex-direction: column;
          margin-left: 12px;
          image {
            width: 18px;
            height: 18px;
          }
          text {
            color: #999;
            font-weight: 400;
            font-size: 10px;
          }
        }
      }
      .cell {
        border-bottom: 1px solid #0000000f;
        padding: 12px;
        > view {
          justify-content: space-between;
          &:last-child {
            margin-top: 12px;
          }
          image {
            width: 12px;
            height: 12px;
            margin-right: 6px;
          }
          text {
            font-weight: 400;
            font-size: 12px;
            color: #333;
          }
          .tag {
            padding: 2px 4px;
            border-radius: 2px;
            color: #fff;
            font-weight: 400;
            font-size: 8px;
            &.red {
              background: #ff3d3b;
            }
            &.yellow {
              background: #ffd300;
            }
            &.green {
              background: #00c582;
            }
          }
          .time {
            color: #999;
            font-weight: 400;
            font-size: 12px;
          }
          .num {
            text {
              color: #ff0309;
              font-weight: 400;
              font-size: 12px;
              &:last-child {
                font-size: 14px;
              }
            }
          }
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
